<template>
	<view>
		<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
			<view>
				<block v-for="(item, index) in tab" :key="index">
					<view class="list-cont" @click="tabs(index,item.nav)" :class="{active: index == num}">
						<view>
							<text class="con-text-a">{{ item.name }}</text>
						</view>
						<view>
							<text class="con-text-b" :class="{activeb: index == num}">{{ item.title }}</text>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		homeList
	} from '../../../common/cloundfun.js'
	export default {
		name: "tab",
		props: {
			tab: Array,
		},
		data() {
			return {
				num: 0,
				arrayStr: []
			}
		},
		methods: {
			tabs(index, nav) {
				this.num = index
				console.log(index, nav)
				// 点击tab切换loading状态显示
				let pageid = 0
				let loading = true
				let uniload = false
				let nonedata = false
				let pullobj = {
					loading:loading, 
					nav:nav,
					pageid:pageid,	
					uniload:uniload,
					nonedata:nonedata
				}
				this.$store.dispatch('navmuta', pullobj)
				// 请求数据库
				let listid = 0
				homeList(nav,listid)
				.then((res) => {
					console.log('=====>',res)
					if(res.data.length == 0){
						let	nonedata = true
						this.$store.commit('nonemuta', nonedata)
					}else{
						let	nonedata = false
						this.$store.commit('nonemuta', nonedata)
					}
					let loading = false
					this.$store.dispatch('loadmuat', loading)
					// vuex传值
					let listdata = res.data
					this.$store.dispatch('listact', listdata)
				}).catch((err) => {
					console.log(err)
				})
			},
		},
		
	}
</script>

<style scoped>
	.active {
		background-image: linear-gradient(to right, #ccffff 0%, #ffcc00 100%);
		border-top-right-radius: 50upx;
	}

	.activeb {
		color: #292c33 !important;
	}

	.scroll {
		white-space: nowrap;
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		background: #FFFFFF;
		padding: 20upx 0;
	}

	.con-text-a {
		color: #292c33;
		font-size: 30upx;
		font-weight: bold;
	}

	.con-text-b {
		color: #9ea0a5;
		font-size: 23upx;
	}

	.list-cont {
		width: 180upx;
		display: inline-block;
		text-align: center;
	}
</style>
